<template>
  <div class="class_wrap">
    <div class="item_wrap">
      <ul>
        <li v-for=" (item , index) in get_item_4" @click="selectItem(item.id)" :data-id="item.id">
          <div>
            <img width="150" height="150" v-lazy="item.imgpath" alt="">
          </div>
          <p>{{item.names}}</p>
          <span>¥ {{item.price}}元</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {get_item_list} from 'api/recommend'

  export default {
    props: ['data'],
    data() {
      return {
        items_data: []
      }
    },
    mounted() {
    },
    created() {
      const cid = this.data[0].cid
      get_item_list({cid}).then((res) => {
        if (res.status === 200) {
          const _res = res.data
          if (_res.resStatus === 0) {
            console.log(_res.data)
            this.items_data = _res.data
          }
        }
      })
    },
    computed: {
      get_item_4() {
        return this.items_data.slice(0, 4)
      }
    },
    methods: {
      selectItem(id) {
        this.$emit("selectItem", id)
      }
    },
    components: {}
  }
</script>

<style scoped lang="scss">
  @import "~assets/sass/mixin";

  .class_wrap {
    overflow: hidden;
    padding-left: 8px;
    padding-right: 8px;
    .item_wrap {
      width: 100%;
      float: left;
      > ul {
        width: 100%;
        overflow: hidden;
        > li {
          float: left;
          width: 48%;
          margin-top: 10px;
          margin-left: 1%;
          margin-right: 1%;
          position: relative;
          background-color: #fff;
          padding-bottom: 10px;
          > div {
            width: 80%;
            padding-top: 80%;
            margin: 0 auto;
            position: relative;
            > img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
          }
          > p {
            text-align: left;
            margin-top: 5px;
            font-size: 13px;
            height: 36px;
            line-height: 17px;
            @include text-ellipsis(2)
            padding-left: 10px;
            padding-right: 10px;
          }
          span {
            color: #00deff;
            font-size: 15px;
          }
        }
      }
    }
  }
</style>
